<template>
  <div class="page-score-order-list mod-score-order">
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="dataForm"
        @submit.prevent
      >
        <div class="input-row">
          <el-form-item label="兑换人:">
            <el-input
              v-model="dataForm.orderNumber"
              :placeholder="$t('order.number')"
              clearable
            />
          </el-form-item>

          <el-form-item label="审核状态:">
            <el-input
              v-model="dataForm.orderNumber"
              :placeholder="$t('order.number')"
              clearable
            />
          </el-form-item>

          <el-form-item label="审核结果:">
            <el-input
              v-model="dataForm.orderNumber"
              :placeholder="$t('order.number')"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t("order.query") }}
            </div>
            <div
              class="default-btn"
              @click="onClear()"
            >
              {{ $t("order.clear") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main-container main">
      <div class="content">
        <!-- 列标题 -->
        <div :class="['tit', showHeadScroll ? sidebarFold ? 'fixed-top-fold' : 'fixed-top' : '']">
          <el-row style="width: 100%;flex-wrap: nowrap;">
            <el-col :span="7">
              <span class="item product">{{ $t("order.product") }}</span>
            </el-col>
            <el-col
              :span="3"
              class="transaction-price"
            >
              <span class="item">{{ $t("order.transaQuantity") }}</span>
            </el-col>
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">{{ $t("order.paymentAmount") }}</span>
            </el-col>
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">兑换人</span>
            </el-col>
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">{{ $t("order.buyerConsignee") }}</span>
            </el-col>
            <el-col
              :span="2"
              class="column-title"
            >
              <span class="item">审核状态</span>
            </el-col>
            <el-col
              :span="3"
              class="column-title"
            >
              <span class="item">{{ $t("order.operation") }}</span>
            </el-col>
          </el-row>
        </div>

        <div
          v-for="order in dataList"
          :key="order.orderId"
          class="prod"
        >
          <div class="prod-tit">
            <span>申请时间：{{ order.createTime }}</span>
          </div>
          <div class="prod-cont">
            <el-row style="width: 100%">
              <el-col :span="10">
                <div class="prod-item">
                  <div
                    v-for="orderItem in order.orderItems"
                    :key="orderItem.orderItemId"
                    class="items name"
                  >
                    <div class="prod-image">
                      <img
                        :src="checkFileUrl(orderItem.pic)"
                        @error="onHandlePicError"
                      >
                    </div>
                    <div class="prod-name">
                      <div class="prod-con">
                        <div class="prod-name-txt">
                          {{ orderItem.prodName }}
                        </div>
                        <div
                          v-if="order.status > 0 && order.status < 8"
                          class="order-status"
                        >
                          {{
                            [
                              "",
                              $t("order.pendingPayment"),
                              $t("order.toBeShipped"),
                              $t("order.pendingReceipt"),
                              "",
                              $t("order.successfulTransaction"),
                              $t("order.transactionFailed"),
                              $t("group.waitGroup"),
                            ][order.status]
                          }}
                        </div>
                        <!-- <div
                          class="order-status"
                          v-if="order.status > 0 && order.status < 8"
                        >{{['','待付款','待发货','待收货','','交易成功','交易失败','待成团'][order.status]}}</div>-->
                        <!-- <span class="prod-info">{{orderItem.skuName}}</span> -->
                      </div>
                    </div>
                    <div class="prod-price">
                      <span>{{ orderItem.price.toFixed(2) }}</span>
                      <span>{{ orderItem.prodCount }}{{ $t("order.piece") }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  <div>
                    <span class="totalprice">{{ $t("order.monetaryUnit")
                    }}{{ order.actualTotal.toFixed(2)
                    }}{{
                      order.score && order.score > 0
                        ? "+ " + order.score + " " + $t("order.score")
                        : ""
                    }}</span>
                    <span
                      v-if="order.freightAmount"
                      class="totalprice"
                    >（{{ $t("order.includingFreight") }}：{{
                      $t("order.monetaryUnit")
                    }}{{ order.freightAmount.toFixed(2) }}）</span>
                    <span>{{ $t("order.total") }} {{ order.productNums }}
                      {{ $t("order.piece") }}</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  {{ order.nickName || '==' }}
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  <div class="buyer-info">
                    <div class="buyer-name">
                      {{ order.userAddrOrder.receiver }}
                    </div>
                    <div class="buyer-phone">
                      {{ order.userAddrOrder.mobile }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="2"
                style="height: 100%"
              >
                <div class="item">
                  待审核
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%"
              >
                <div class="item">
                  <div class="operate">
                    <div
                      class="default-btn text-btn operate-btn"
                      @click="onApprove(order)"
                    >
                      审核
                    </div>
                    <div
                      class="default-btn text-btn operate-btn"
                      @click="onApprove(order)"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div
          v-if="!dataList.length"
          class="empty"
        >
          {{ $t("order.noData") }}
        </div>
      </div>
    </div>
    <el-pagination
      v-if="dataList.length"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onSizeChangeHandle"
      @current-change="onCurrentChangeHandle"
    />

    <el-dialog
      v-model="auditDialogVisible"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      width="40%"
      title="审核"
    >
      <div class="content">
        <el-form
          ref="auditformRef"
          label-width="auto"
          :model="auditform"
          :rules="auditformRules"
          @submit.prevent
        >
          <el-form-item
            label="审核结果"
            prop="status"
          >
            <el-radio-group
              v-model="auditform.status"
              @change="(v) => {
                auditformRules.remark[0].required = v === 0
              }"
            >
              <el-radio :label="1">
                通过
              </el-radio>
              <el-radio :label="0">
                不通过
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="备注"
            prop="remark"
          >
            <el-input
              v-model="auditform.remark"
              type="textarea"
              :rows="2"
              maxlength="200"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="auditDialogVisible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onApproveSubmit"
          >
            {{ $t('shopProcess.submit') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import moment from 'moment'

const sts = ref(0)
const dataForm = ref({})
const dateRange = ref([])
const status = ref(null)

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const logDataForm = reactive({
  dvyId: '', // 当前物流公司id
  dvyFlowId: '', // 物流单号
  dvyNames: [] // 物流公司列表
})

const showHeadScroll = ref(false)
let tempSearchForm = null

const commonStore = useCommonStore()
const sidebarFold = computed({
  get () { return commonStore.sidebarFold },
  set (val) { commonStore.updateSidebarFold(val) }
})

onActivated(() => {
  // 携带参数查询
  const query = useRoute().query
  if (Object.keys(query).length > 0) {
    onGetDataList(page)
  }
})

onMounted(() => {
  // 携带参数查询
  onGetDataList(page)
  // 监听页面滚动
  window.addEventListener('scroll', scrollToTop)
})

onUnmounted(() => {
  // 页面销毁时移除监听
  window.removeEventListener('scroll', scrollToTop)
})

const onHandlePicError = (event) => {
  event.target.src = require('@/assets/img/def.png')
}
/**
 * 页面滚动事件
 */
const scrollToTop = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  showHeadScroll.value = scrollTop > 140
}
/**
 * 获取数据列表
 */
const onGetDataList = (pageParam, newData = false) => {
  if (newData || !tempSearchForm) {
    tempSearchForm = JSON.parse(JSON.stringify(dataForm.value))
  }
  pageParam = (pageParam === undefined ? page : pageParam)
  http({
    url: http.adornUrl('/score/order/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        tempSearchForm,
        {
          status: 8,
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize
        }
      ), false
    )
  }).then(({ data }) => {
    dataList.value = data.records
    onHandleDataList()
    page.total = data.total
    sts.value = !status.value ? 0 : status.value

    // 末尾页数据为空重新请求
    if (!dataList.value.length && page.currentPage > 1) {
      page.currentPage = 1
      onGetDataList()
    }
  })
}
const onHandleDataList = () => {
  dataList.value.forEach(order => {
    let isOnlineDelivery = 1
    for (let i = 0; i < order.orderItems.length; i++) {
      if (order.orderItems[i].dvyType === 1) {
        isOnlineDelivery = 0
        break
      }
    }
    order.isOnlineDelivery = isOnlineDelivery
  })
}
// 每页数
const onSizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  onGetDataList(page)
}
// 当前页
const onCurrentChangeHandle = (val) => {
  page.currentPage = val
  onGetDataList(page)
}

const auditform = ref({})
const auditformRules = ref({
  status: [
    { required: true, message: '审核结果不能为空', trigger: 'change' }
  ],
  remark: [
    { required: false, message: '备注不能为空', trigger: 'blur' }
  ]
})
const auditDialogVisible = ref(false)
const onApprove = (row) => {
  auditDialogVisible.value = true
}
// 清空按钮
const onClear = () => {
  dataForm.value = {}
  dateRange.value = []
  status.value = null
}

// 搜索查询
const onSearch = (newData = false) => {
  page.currentPage = 1
  onGetDataList(page, newData)
}

</script>

<style lang="scss" scoped>
.page-score-order-list{
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-button+.el-button {
    margin-left: 0 !important;
    display: block;
  }
  :deep(.export-load) {
    top: -50% !important;
  }

  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    *zoom: 1;
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

  // .el-form-item {
  //   margin-bottom: 10px !important;
  // }
  :deep(input.el-input__inner) {
    // border: 0;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }

  &.mod-score-order {

    .main {
      .status-nav {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        height: 40px;
        border-bottom: 1px solid #ddd;
        line-height: 40px;
        &>ul{
          list-style-type: none;
          padding-left: 0;
          margin: 0
        }
        .nav-item {
          float: left;
          height: 40px;
          line-height: 40px;
          background: #f7f8fa;
          border: 1px solid #ddd;
          padding: 0 20px;
          margin: 0 -1px -1px 0;
          cursor: pointer;
        }

        .li-txt {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 0;
        }

        .nav-item:first-child {
          border-left: 1px solid #ddd;
        }

        .selected {
          background: #fff;
          border-bottom: none;
        }
      }

      .status-nav-bottom {
        margin-bottom: 72px;
      }

      .tit {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        background: #F7F8FA;
        z-index: 11;
        height: 57px;
        font-weight: bold;
      }

      .fixed-top {
        position: fixed;
        width: calc(100% - 310px);
        min-width: 890px;
        top: 90px;
      }

      .fixed-top-fold {
        position: fixed;
        width: calc(100% - 160px);
        min-width: 1040px;
        top: 90px;
      }

      .column-title {
        text-align: center;
      }

      .transaction-price {
        text-align: right;
        min-width: 140px;
      }
    }

    .prod {
      margin-bottom: 15px;
    }

    .tit {
      display: flex;
      height: 45px;
      align-items: center;
    }

    .tit .item {
      padding: 0 10px;
      width: 10%;
      text-align: center;
    }

    .tit .product {
      width: 25%;
    }

    .prod-tit {
      padding: 10px;
      background: #f8f8f9;
      border-left: 1px solid #dddee1;
      border-top: 1px solid #dddee1;
      border-right: 1px solid #dddee1;
    }

    .prod-tit span {
      margin-right: 15px;
    }

    .prod-cont {
      display: flex;
      border-top: 1px solid #dddee1;
      border-bottom: 1px solid #dddee1;
      border-left: 1px solid #dddee1;
      color: #495060;
    }

    .prod-cont .item {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      // width: 10%;
      border-right: 1px solid #dddee1;
      text-align: center;
      height: 100%;
    }

    .prod-cont .item span {
      display: block;
    }

    .prod-cont .prod-item {
      // width: 38%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #dddee1;
    }

    .prod-name {
      // display: flex;
      // align-items: center;
      width: 55%;
      text-align: left;
      vertical-align: middle;
    }

    .prod-con {
      display: block;
      padding: 0 !important;

      .prod-name-txt {
        padding-right: 10px;
        box-sizing: border-box;
        display: -webkit-box;
        word-break: break-word;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .prod-price {
      position: absolute;
      right: 10px;
      text-align: center;
    }

    .prod-price span {
      display: block;
    }

    .prod-price span:first-child {
      margin-bottom: 10px;
    }

    .buyer-info {
      display: block;
      width: 100%;
    }

    .buyer-name {
      margin-bottom: 10px;
    }

    .order-status {
      display: inline-block;
      margin-top: 15px;
      padding: 2px 4px;
      border: 1px solid #e43130;
      border-radius: 2px;
      color: #e43130;
    }

    .prod-cont .items.name {
      display: flex;
      align-items: center;
      position: relative;
      padding: 10px;
      // height: 100px;
      border-bottom: 1px solid #dddee1;
    }

    .prod-cont .items.name:last-child {
      border-bottom: none;
    }

    .prod-image {
      margin-right: 20px;
      width: 80px;
      height: 80px;
    }

    .prod-image img {
      width: 100%;
      height: 100%;
    }

    // .item span {
    //   display: block;
    //   margin-bottom: 10px;
    // }
    .totalprice {
      margin-bottom: 10px;
    }

    .item .operate {
      color: #2d8cf0;
    }

    .item .totalprice {
      color: #c00;
    }

    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-form-item {
      margin-bottom: 20px !important;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-form-item__label {
      width: 100px;
    }
  }

  .empty {
    display: block;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #aaa;
  }

  // 修改物流弹窗
  .change-logistics {
    color: #333;
    padding: 0 20px;
  }

  // .change-logistics,
  // .revise-log {
  //   max-height: 300px;
  //   overflow-y: auto;
  // }
  .LogModification {
    .i-tit {
      margin-bottom: 10px;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .el-button+.el-button {
      display: inline-block;
      margin-left: 10px !important;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    input.el-input__inner {
      border: 0 !important;
    }

    .log-list {
      max-height: 600px;
      overflow-y: auto;
    }
  }

  .change-logistics .warning {
    padding: 10px;
    border: 1px solid #f1924e;
    background: #fff5ed;
  }

  .change-logistics .item {
    padding-bottom: 20px;
  }

  .change-logistics .item .i-tit {
    display: flex;
    align-items: center;
  }

  .change-logistics .item .i-tit .big {
    font-weight: 600;
    margin-right: 15px;
  }
// eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .label {
    width: 80px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con {
    display: flex;
    align-items: center;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio {
    margin-right: 10px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio input,
  .change-logistics .item .i-con .con .con-radio span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-radio input[type="radio"] {
    margin-left: 5px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-text {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }

  .change-logistics .item .i-con .con .con-text .text {
    width: 80px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .change-logistics .item .i-con .con .con-text input[type="text"] {
    border: 1px solid #ddd;
    padding: 0 10px;
    height: 30px;
    width: 160px;
    border-radius: 2px;
  }

  // 修改物流弹窗end

  // 修改物流信息弹窗
  .log-list {
    margin-top: 30px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-form-item__label {
    // text-align: left;
    width: 100px;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-form-item {
    margin-bottom: 0;
    // margin-top: 10px;
  }

  .info-int {
    display: flex;
  }

  .form-item {
    margin-right: 15px;
  }

  .int-frame {
    // border-radius: 0;
    border: 0;
    // border: 1px solid #ddd;
  }

  //
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .info-int .el-form-item__content,.info-int .el-form-item__label,.el-input__suffix-inner,.el-input__icon {
    height: 32px;
    line-height: 32px;
  }

  // 修改物流信息弹窗end
  // 确认修改
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .el-table .cell {
    text-align: center;
  }

  .errortip {
    border-color: #e43130;
  }

  .block {
    display: block !important;
  }

  .marLeftNo {
    margin-left: 0 !important;
  }

  div :deep(.el-row) {
    display: flex;
  }
  // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .mod-score-order .search-bar .input-row .myinput-appearance>input::-webkit-outer-spin-button,.mod-score-order .search-bar .input-row .myinput-appearance>input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}
</style>
